import { reactive } from "vue"
import { defineStore } from "pinia"
import { nanoid } from 'nanoid'
import axios from 'axios'


// 第一种方式：选项式
// export const useLoveTalkStore = defineStore('loveTalk', {
//   state() {
//     return {
//       loveTalkList: JSON.parse(window.localStorage.getItem('LOVE_TALK_CACHE') as string) || []
//     }
//   },
//   actions: {
//     async fetchTalk() {
//       const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//       let newObj = {
//         id: nanoid(),
//         title: res.data.content,
//       }
//       this.loveTalkList.unshift(newObj)
//     }
//   }
// })


// 第二种方式：组合式
export const useLoveTalkStore = defineStore('loveTalk', () => {

  const loveTalkList = reactive(JSON.parse(window.localStorage.getItem('LOVE_TALK_CACHE') as string) || [])

  async function fetchTalk() {
    const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let newObj = {
      id: nanoid(),
      title: res.data.content,
    }
    loveTalkList.unshift(newObj)
  }

  return {
    loveTalkList,
    fetchTalk
  }
})